<template>
  <!--<div class="row">-->
  <!--<div class="col-md-3" style="background-color: #E4E7ED;min-height: 580px;padding-right: 1px;">-->
  <!--<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
  <!--</div>-->
  <!--<div class="col-md-9" style="background-color:#F2F6FC;min-height: 580px;padding: 1px;">-->
  <!--<el-table-->
  <!--:data="tableData"-->
  <!--border-->
  <!--style="width: 100%">-->
  <!--<el-table-column-->
  <!--prop="date"-->
  <!--label="姓名"-->
  <!--width="180">-->
  <!--</el-table-column>-->
  <!--<el-table-column-->
  <!--prop="name"-->
  <!--label="电话号码"-->
  <!--width="180">-->
  <!--</el-table-column>-->
  <!--<el-table-column-->
  <!--prop="address"-->
  <!--label="创建时间">-->
  <!--</el-table-column>-->
  <!--<el-table-column-->
  <!--fixed="right"-->
  <!--label="操作"-->
  <!--width="100">-->
  <!--<template slot-scope="scope">-->
  <!--<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
  <!--<el-button type="text" size="small">编辑</el-button>-->
  <!--</template>-->
  <!--</el-table-column>-->
  <!--</el-table>-->
  <!--</div>-->
  <!--</div>-->
  <el-row :gutter="5">
    <el-col :span="6" class="grid-content bg-purple">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </el-col>
    <el-col :span="18">
      <div class="grid-content bg-purple">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="member_name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="电话号码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间">
          </el-table-column>
          <el-table-column
            label="操作"
            width="150" >
            <template slot-scope="scope" >
              <el-button @click="handleClick(scope.row)" type="text" size="small"  v-show="operation_ok">删除</el-button>
              <!--<el-button type="text" size="small" @click="handleClick2(scope.row)">编辑</el-button>-->
              <el-button type="text" size="small" @click="handleClick3(scope.row)" v-show="operation_ok">角色分配</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="角色选择" :visible.sync="dialogTableVisible">
          <!--<el-tree :data="sourcedata" :props="defaultProps" @node-click="handleNodeClick2"-->
          <!--:filter-node-method="filterNode"-->
          <!--node-key="id" :default-expanded-keys="[0]"-->
          <!--ref="tree2">-->
          <!--</el-tree>-->
          <el-tree
            :data="sourcedata"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps">
          </el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="getCheckedNodes">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-col>
  </el-row>

</template>
<script>
  import {getORGlist, getMenlist, DeleteMenInfo, getrolelist, addMenroleInfo, getSelectRolelist} from '../api/api';
  export default {
    data() {
      return {
        video_member_id: '',
        sourcedata: [],
        dialogTableVisible: false,
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [],
        operation_ok:this.base.operation_ok
      };
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(data) {
        this.getMember(data.id);
        console.log(data);
      },
      handleNodeClick2(data) {
        console.log(data);
      },
      getMember(organization_id) {
        var _this = this;
        var Params = {organization_id: organization_id};
        var jsonstr = JSON.stringify(Params);
        getMenlist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var memberList = data.values;
              _this.tableData = memberList;
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      initDatesousre() {
        var _this = this;
        var loginParams = {};
        var jsonstr = JSON.stringify(loginParams);
        getORGlist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var orgList = data.values;
              _this.data = orgList;
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      handleClick(row) {
        var _this = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            var deleteParams = {video_member_id: row.video_member_id};
            DeleteMenInfo(deleteParams)
              .then(responsedata => {
                let {status, data} = responsedata;
                if (status !== 200) {
                  this.$message({
                    message: '请求失败',
                    type: 'error'
                  });
                } else {
                  var descritpion = data.descritpion;
                  if (data.status == '90000') {
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.getMember(row.organization_id);
                  } else {
                    this.$message({
                      type: 'error',
                      message: descritpion
                    });
                  }
                }
              })
              .catch(function (response) {
                _this.$notify.error({
                  title: '错误',
                  message: '网络请求失败'
                });
                console.log(response);
              });


          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        console.log(row);
      },
      handleClick3(row) {
        var video_member_id = row.video_member_id;
        this.video_member_id = video_member_id;
        this.dialogTableVisible = true;
        this.getrole();
      },
      getrole() {
        var _this = this;
        var Params = {};
        var jsonstr = JSON.stringify(Params);
        getrolelist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var roleList = data.values;
              _this.sourcedata = roleList;
              this.gethasselectRole();
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      gethasselectRole(){
        var _this=this;
        var Params = {video_member_id:this.video_member_id};
        var jsonstr = JSON.stringify(Params);
        getSelectRolelist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var keys=[];
              var selectroleList = data.values;
              for(var j in selectroleList){
                var item=selectroleList[j];
                var video_role_id=item.video_role_id;
                keys[j]=video_role_id;
              }
              this.$refs.tree.setCheckedKeys(keys);
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
      },
      getCheckedNodes() {
        var selectdate = this.$refs.tree.getCheckedNodes();
        var ids = '';
        for (var i in selectdate) {
          var item = selectdate[i];
          var video_role_id = item.id;
          ids += video_role_id + ',';
        }
        ids = (ids.substring(ids.length - 1) == ',') ? ids.substring(0, ids.length - 1) : ids;

        var addParams = {video_member_id: this.video_member_id, video_role_id: ids};
        addMenroleInfo(addParams)
          .then(responsedata => {
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var descritpion = data.descritpion;
              if (data.status == '90000') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
//                  var roleList = data.values;
//                this.initDatesousre();
              } else {
                this.$message({
                  message: descritpion,
                  type: 'error'
                });
              }

            }
          })
          .catch(function (response) {
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });
//        console.log(this.$refs.tree.getCheckedNodes());
        this.dialogTableVisible = false;
      },
    },
    mounted() {
      this.initDatesousre();
    }
  };
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #e6eff9;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 0px;
    min-height: 580px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
